<template>
	<view class="page">
		<u-gap height="20"></u-gap>
		<view class="section margin0">
			<view class="title">选择视频素材</view>
			<view class="chooseVue margin20 flex-between align-center" @click="$u.throttle(showFun, 1000)">
				<text v-if="uploadVideoUrl && videoId" style="color: #000">视频素材-ID{{ videoId }}-{{videoDuration}}秒</text>
				<text v-else>请选择视频素材</text>
				<image src="../../static/more.png" style="width: 45rpx; height: 45rpx"></image>
			</view>
		</view>
		<!-- 设置声音名称 -->
		<view class="inpVue margin30">
			<view class="label">设置视频名称</view> 
			<input type="text" placeholder="请设置视频名称" v-model="name" />
		</view>
		<!-- 添加文案 -->
		<view class="inpVue margin30">
			<view class="label">添加文案</view>
			<view class="margin20">
				<u-subsection :list="tabs" :current="current" button-color="#FFA0A0" active-color="#fff" height="88"
					bg-color="#f5f5f5" @change="change"></u-subsection>
			</view>
			<textarea placeholder="请输入文案" maxlength="-1" v-if="current === 0" v-model="text"></textarea>
			
			<view class="flex align-center" v-if="current === 1">
				<textarea placeholder="请输入文案需求" maxlength="-1" class="flex-1" v-model="aiText"></textarea>
				<view class="aiBtn text-center" @click="aiBtnFun()">AI生成</view>
			</view>
		</view>

		<!-- 选择音色 -->
		<view class="inpVue margin30" v-if="current != 2">
			<view class="label" style="padding: 0">选择音色</view>
			<view class="chooseVue margin30 flex-between align-center padding-row20" @click="show50 = true">
				<text v-if="selectId && voiceName">{{ voiceName }}-{{ voiceSex }}</text>
				<text v-else>选择音色</text>
				<image src="../../static/more.png" style="width: 45rpx; height: 45rpx"></image>
			</view>
		</view>
		
		<!-- 选择语速 -->
		<view class="inpVue margin30" v-if="current != 2">
			<view class="label" style="padding: 0">选择语速</view>
			<view class="flex-between margin20">
				<view class="speed" :class="{speedActive: item===speed}" 
					v-for="(item, index) in speeds" :key="index"
					@click="speed=item"
				>{{ item }}</view>
			</view>
		</view>
		
		<!-- 语气 -->
		<!-- <view class="inpVue margin30" v-if="current != 2">
			<view class="label" style="padding: 0">语气</view>
			<view class="margin20">
				<u-radio-group v-model="tone" active-color="#FFA0A0">
					<u-radio v-for="(item, index) in tones" :key="index" :name="item.name">{{ item.name }}</u-radio>
				</u-radio-group>
			</view>
		</view> -->

		<!-- 开始生成视频按钮 -->
		<view class="inpVue margin50">
			<view class="text-center margin0" style="color: #333; font-weight: 600">当前剩余{{ aiVideoPoints }}积分</view>
			<view class="startBtn margin20" @click="auditionFun()">开始生成视频</view>
			<view class="flex-center align-center margin20">
				<u-checkbox v-model="checked" active-color="#FFA0A0" label-size="28">前两次公开训练，每次最高可获得100积分</u-checkbox>
			</view>
		</view>

		<u-gap height="30"></u-gap>

		<!-- 选择视频素材 -->
		<u-popup v-model="show" mode="left">
			<view class="popupVue">
				<view class="flex-between align-center">
					<view class="h2">我的视频素材</view>
					<view class="upload" @click="chooseVideo()" v-if="videoProgress === 0">
						<text>上传素材</text>
					</view>
					<u-line-progress height="36" active-color="#FFA0A0" :percent="videoProgress" style="width: 220rpx" v-else></u-line-progress>
				</view>
				<!-- 无数据显示 -->
				<view class="w100 flex-column align-center padding-column20 fixed-auto" v-if="videoList.length === 0">
					<image src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/empty.png"
						style="width: 256rpx; height: 256rpx"></image>
					<text style="color: #81868e">暂无视频素材</text>
				</view>
				<scroll-view scroll-y class="scrollVue">
					<view class="videoVue flex-between flex-wrap">
						<view class="videoItem" v-for="(item, index) in videoList" :key="index">
							<view class="relative" style="width: 270rpx; height: 270rpx"
								@click.stop="selectVideo(item)">
								<image :src="item.videoUrl + '?x-oss-process=video/snapshot,t_1,f_jpg,m_fast,ar_auto'" style="width: 270rpx; border-radius: 12rpx 12rpx 0 0" mode="aspectFill"></image>
								
								<!-- 视频时长显示 -->
								<view class="absolute" v-if="item.videoDuration"
								 style="
									width: 88rpx;
									height: 50rpx;
									border-radius: 12rpx 0 0 0;
									background: rgba(0, 0, 0, 0.5);
									top: 0;
									left: 0;
									line-height: 50rpx;
									text-align: center;
									font-size: 24rpx;
									color: #fff;
								  ">{{ item.videoDuration }}秒</view>
								  
								<!-- 选中状态显示  -->
								<view class="absolute" v-if="videoId===item.id"
									style="width: 88rpx; 
										height: 50rpx; 
										right: 0; 
										top: -2rpx; 
										background: rgba(0, 0, 0, 0.5);
										border-radius: 0 12rpx 0 0;
										line-height: 50rpx;
										text-align: center;
										">
									<u-icon name="checkbox-mark" color="#FFA0A0" size="30"></u-icon>
								</view>
								
							</view>
							<view class="botVue">
								<view style="height: 75rpx; text-align: center;line-height: 75rpx;">
									<text>素材ID:{{ item.id }}</text>
								</view>
								<view class="flex-between" style="height:85rpx">
									<view class="btn" @click="oprationId = item.id; show20 = true;">删除</view>
									<view class="btn" @click="$tools.router('../play', item.videoUrl)">播放</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<!-- 选择音色 -->
		<u-popup v-model="show50" mode="left">
			<view class="popupVue">
				<view class="flex-between align-center">
					<view class="h2">选择音色</view>
					<view class="upload" @click="$tools.route('./voice')">去训练</view>
				</view>
				<scroll-view scroll-y class="scrollVue">
					<view class="voiceVue">
						<u-subsection :list="tabList" :current="voiceCurrent" height="80" button-color="#fff"
							active-color="#FFA0A0" bg-color="#f5f5f5" @change="voiceChange"></u-subsection>
						<!-- 无数据显示 -->
						<view class="w100 flex-column align-center padding-column20 fixed-auto"
							v-if="voiceList.length === 0">
							<image src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/empty.png"
								style="width: 256rpx; height: 256rpx"></image>
							<text style="color: #81868e">无音色选择</text>
						</view>
						
						<view class="item flex align-center margin20" v-for="(item, index) in voiceList" :key="index">
							<view class="playBtn relative" @click="playFun(item.url, item.id)">
								<image src=""
									style="width: 44rpx; height: 44rpx" class="absolute-auto" v-if="audioId != item.id">
								</image>
								<image src=""
									style="width: 44rpx; height: 44rpx" class="absolute-auto" v-else></image>
							</view>
							<view class="content flex-between padding-row20 align-center" @click="selectAudio(item)">
								<text style="color: #81868e">{{ item.name }}-{{ item.sex }}</text>
								<image src="../../static/radio1.png" style="width: 40rpx; height: 40rpx"
									v-if="selectId == item.id"></image>
								<image src="../../static/radio0.png" style="width: 40rpx; height: 40rpx" v-else>
								</image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<!-- 删除声音 -->
		<u-modal v-model="show20" content="确认删除该视频素材" confirm-color="#FFA0A0" :show-cancel-button="true" @confirm="deleteFun"></u-modal>

		<!-- IOS HOD拍摄泛白提醒 -->
		<u-modal v-model="show80" @confirm="confirm" confirm-text="我知道啦" confirm-color="#FFA0A0" content="IOS用户拍摄视频请勿开启HDR模式, 否则有概率造成合成视频画质偏白的现象"></u-modal>
	
		<!-- 音频试听弹框 -->
		<u-popup v-model="show60" mode="center" border-radius="12" :mask-close-able="false">
			<view class="popVue">
				<view class="title text-center">视频合成待确认</view>
				<view class="item flex align-center margin40">
					<view class="playBtn relative" @click="playTestFun(cloneSoundUrl)">
						<image src=""
							style="width: 44rpx; height: 44rpx" class="absolute-auto" v-if="!isTest">
						</image>
						<image src=""
							style="width: 44rpx; height: 44rpx" class="absolute-auto" v-else></image>
					</view>	
					<text class="padding-row20" style="color: #000;">点击左侧按钮试听音频</text>
				</view>
				<view class="notice" v-if="videoDuration && soundTime - videoDuration > 2">注意：检测到当前音频时长大于视频素材时长，有可能导致合成后的视频在某一刻出现不连贯的问题，请悉知。</view>
				<view class="notice">注意：确认生成视频将扣除 <text>{{points}}积分</text></view>
				<view class="btnVue flex-between margin50">
					<view class="btn" @click="startFun(1)">取消生成视频</view>
					<view class="btn" @click="startFun(0)">确认生成视频</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import baseUrl from "@/common/url.js";
import { mapState } from "vuex";
export default {
	data() {
		return {
			name: "",
			tabs: [{ name: "文本添加" }, { name: "AI生成文案" }],
			tabList: [{ name: "我的" }, { name: "推荐" }, { name: "他人" }],
			current: 0,
			text: "",
			aiText: "",
			videoProgress: 0,
			audioProgress: 0,
			fileName: "",
			fileUrl: "",
			show: false,
			show20: false,
			show50: false,
			show60: false,
			show80: false,
			videoList: [],
			videoId: "",
			uploadVideoUrl: "",
			innerAudioContext: null,
			isUploadPlay: false,
			voiceList: [],
			voiceType: "我的",
			voiceCurrent: 0,
			audioId: "",
			audioContext: null,
			soundUrl: "",
			voiceName: "",
			voiceSex: "",
			soundOriginalText: "",
			aiVideoPoints: 0,
			voiceFileUrl: "",
			checked: false,
			selectId: "",
			iFlyAssetId: "",
			oprationId: "",
			oprationUrl: "",
			toastInstance: null,
			isStart: false,
			speed: 1,
			speeds: [0.8, 0.9, 1, 1.1, 1.2],
			soundTime: 0,
			cloneSoundUrl: "",
			isTest: false,
			projectId: "",
			videoDuration: 0,
			points: 0,
			tones: [{ name: "开启" }, { name: "关闭" }],
			tone: "开启",
			timer: null
		};
	},

	async onLoad() {
		await this.getVideoList();
		await this.getVoiceList();
		await this.getPoint();
	},
	
	// 待确认列表
	async onShow() {
		await this.getUndetermined();
	},
	
	onUnload() {
		if(this.audioContext) {
			this.audioContext.destroy();
			this.audioContext = null;
		}
		if(this.timer) {
			clearInterval(this.timer)
			this.timer = null
		}
	},

	computed: {
		...mapState({
			user: (state) => state.user,
		}),
	},

	methods: {
		change(e) {
			this.current = e;
		},
		
		confirm(){
			uni.setStorageSync("isFirstUpload", -1)
		},
		
		showFun(){
			this.show = true
		},
		
		// 获取待确认列表
		async getUndetermined(){
			const res = await this.$request("/shuziren/userVideo/undetermined", {}, "GET")
			if(res.code===200) {
				console.log(res)
				if(res.data.length>0) {
					this.show60 = true
					this.cloneSoundUrl = res.data[0].cloneSoundUrl
					this.projectId = res.data[0].id
					this.soundTime = res.data[0].soundTime
					this.points = res.data[0].points
					this.videoDuration = res.data[0].videoDuration
					console.log("获取待确认列表", this.cloneSoundUrl, this.projectId, this.soundTime)
				}
			}
		},

		// 确认/取消生成视频
		startFun(status){
			if(this.audioContext) {
				this.audioContext.destroy();
				this.audioContext = null;
			}
			this.show60 = false
			this.isStart = false
			uni.showLoading()
			this.$request("/shuziren/userVideo/nextStep", {
				id: this.projectId,
				status: status
			}).then(res=>{
				if(res.code===200) {
					uni.hideLoading()
					this.$u.toast(status===1 ? "已取消生成视频" : "开始生成视频")
					if(status===0) {
						this.name = ""
						this.uploadVideoUrl = ""
						this.soundUrl = ""
						this.isStart = false
						this.text = ""
						this.aiText = ""
						this.speed = 1
						this.selectId = ""
						this.voiceName = ""
						this.voiceSex = ""
						this.videoId = ""
						this.isTest = false
						this.getPoint() //刷新积分
						setTimeout(()=>{
							this.$tools.route("../mine/myVideo")
						}, 1000)
					}else{
						this.isTest = false
						if(this.audioContext) {
							this.audioContext.destroy();
							this.audioContext = null;
						}
					}
				}else{
					uni.hideLoading()
					this.$u.toast(res.msg)
				}
			})
		},

		// 生成视频第一步, 音频试听
		async auditionFun(){
			if(!this.name) return this.$u.toast("请设置视频名称");
			if(!this.uploadVideoUrl) return this.$u.toast("请选择视频素材");
			if(!this.soundUrl) return this.$u.toast("请选择音色");
			if(this.current === 0 && !this.text) return this.$u.toast("请输入文案"); 
			if(this.current === 1 && !this.aiText) return this.$u.toast("输入文案需求并AI生成");
			if(this.current === 0 && this.text.length < 20) return this.$u.toast("文案字数不低于20字");
			if (this.current === 1 && this.aiText.length < 20) return this.$u.toast("文案字数不低于20字");
			if(this.isStart) return
			this.isStart = true
			uni.showLoading({
				title: "整合中，请稍后..."
			})
			let that = this
			const res = await that.$request("/shuziren/userVideo/auditionNew", {
				name: that.name,
				publiced: that.checked,
				uploadVideoUrl: that.uploadVideoUrl,
				kouXing: -10,
				soundUrl: that.soundUrl,
				flagHd: 0,
				soundText: [that.text, that.aiText, ""][that.current],
				soundOriginalText: that.soundOriginalText,
				type: 2,
				subtitle: 0,
				speed: that.speed*50,
				uploadVideoId: that.videoId,
				soundId: that.selectId,
				iflyAssetId: that.iFlyAssetId
			}, "POST", "application/json");
			if(res.code===200) {
				// uni.hideLoading();
				console.log(res)
				that.soundTime = res.data.soundTime
				that.cloneSoundUrl = res.data.cloneSoundUrl
				that.projectId = res.data.id
				that.soundTime = res.data.soundTime
				that.videoDuration = res.data.videoDuration
				that.timer = setInterval(()=>{
					that.getAudition(res.data.id)
				}, 2000)
			}else{
				uni.hideLoading();
				that.isStart = false
				that.$u.toast(res.msg)
			}
		},
		
		getAudition(id){
			this.$request("/shuziren/userVideo/undetermined", { id }, "GET").then(res=>{
				if(res.code===200) {
					// 打印res
					console.log("当前res内容:",res);
					if(res.data && res.data.length>0) {
						uni.hideLoading()
						clearInterval(this.timer)
						this.timer = null
						this.points = res.data[0].points
						this.soundTime = res.data[0].soundTime
						this.cloneSoundUrl = res.data[0].cloneSoundUrl
						this.projectId = res.data[0].id
						this.soundTime = res.data[0].soundTime
						this.videoDuration = res.data[0].videoDuration
						this.show60 = true
					}else{
						console.log("任务执行中")
					}
				}
			})
		},

		// 获取积分余额
		async getPoint() {
			const res = await this.$request("/aiet-user-center/user/points/summary",{},"GET");
			if (res.code === 200) {
				this.aiVideoPoints = res.data.aiVideoPoints;
				console.log("视频积分余额", this.aiVideoPoints)
			}
		},

		// 使用视频素材
		selectVideo(item) {
			if (this.videoId === item.id) {
				this.videoId = "";
				this.uploadVideoUrl = "";
				return;
			}
			this.videoId = item.id;
			this.uploadVideoUrl = item.videoUrl;
			this.videoDuration = item.videoDuration
			this.show = false;
		},

		// 使用音色
		selectAudio(item) {
			if (this.selectId === item.id) {
				this.voiceName = "";
				this.voiceSex = "";
				this.soundUrl = "";
				this.soundOriginalText = "";
				this.selectId = "";
				this.iFlyAssetId = null
				return;
			}
			this.selectId = item.id;
			this.voiceName = item.name;
			this.voiceSex = item.sex;
			this.soundUrl = item.url;
			this.soundOriginalText = item.soundText;
			this.iFlyAssetId = item.iflyAssetId || null
			this.show50 = false;
		},

		// 删除视频素材
		async deleteFun() {
			const res = await this.$request("/shuziren/userUploadVideo",{id: this.oprationId},"DELETE");
			if (res.code === 200) {
				this.$u.toast("删除成功"); 
				this.getVideoList();
			}
		},

		// 获取上传视频列表
		async getVideoList() {
			const res = await this.$request("/shuziren/userUploadVideo",{
				pageNum: 0,
				pageSize: 30,
			},"GET");
			if (res.code === 200) {
				this.videoList = res.data.content;
				console.log("上传视频列表", this.videoList)
			}
		},

		// 获取音色列表
		async getVoiceList() {
			const res = await this.$request("/shuziren/soundTrain/list", {
				type: this.voiceType,
				pageNum: 0,
				pageSize: 100,
			},"GET");
			if (res.code === 200) {
				this.voiceList = res.data.content;
				console.log(this.voiceList)
			}
		},

		voiceChange(e) {
			this.voiceType = this.tabList[e].name;
			this.getVoiceList();
		},

		playTestFun(){
			if(this.audioContext) {
				this.audioContext.destroy();
				this.audioContext = null;
				this.isTest = false
				return
			}
			this.audioContext = uni.createInnerAudioContext();
			this.audioContext.autoplay = true;
			this.audioContext.src = this.cloneSoundUrl;
			this.isTest = true
			let that = this
			this.audioContext.onPlay(() => {
				console.log("开始播放");
			});
			this.audioContext.onEnded(() => {
				console.log("播放结束");
				that.isTest = false
				that.audioContext.destroy();
				that.audioContext = null;
			});
		},

		// 播放列表音频
		playFun(url, id) {
			if (this.audioId === id) {
				this.audioContext.pause();
				this.audioId = 0;
				return;
			}
			if (this.audioId && this.audioId != id) {
				this.audioContext.destroy();
				this.audioContext = null;
				this.audioId = 0;
			}
			this.audioId = id;
			this.audioContext = uni.createInnerAudioContext();
			this.audioContext.autoplay = true;
			this.audioContext.src = url;
			this.audioContext.onPlay(() => {
				console.log("开始播放");
			});
			this.audioContext.onEnded(() => {
				console.log("播放结束");
				this.audioId = 0;
				this.audioContext.destroy();
				this.audioContext = null;
			});
		},

		async aiBtnFun() {
			if (!this.aiText) return this.$u.toast("请输入文案");
			uni.showLoading();
			try {
				const res = await this.$request("/shuziren/aichat/answer", {
					applicationId: "348f9058-8780-11ef-8828-0242ac110002",
					question: this.aiText,
				});
				if (res.code === 200) {
					console.log(res);
					uni.hideLoading();
					this.aiText = res.data;
				} else {
					uni.hideLoading();
					this.$u.toast(res.msg);
				}
			} catch (error) {
				uni.hideLoading();
				console.error("请求失败:", error);
				this.$u.toast("请求失败，请重试");
			}
		},
		
		// 选择音频文件
		chooseAudio() {
			let that = this;
			wx.chooseMessageFile({
				extension: [".wav", ".mp3", ".m4a", ".amr"],
				success(res) {
					const tempFilePaths = res.tempFiles[0];
					console.log(tempFilePaths);
					const uploadTask = uni.uploadFile({
						url: baseUrl.url + "/aiet-file-center/file",
						filePath: tempFilePaths.path,
						name: "file",
						formData: {
							path: "shuziren/audio",
						},
						success(uploadRes) {
							let data = JSON.parse(uploadRes.data);
							console.log(data);
							if (data.code === 200) {
								that.fileName = tempFilePaths.name;
								that.fileUrl = data.data.fileUrl;
								console.log(that.fileName, that.fileUrl);
							} else {
								that.$u.toast(data.msg);
							}
						},
						fail(uploadError) {
							console.log(uploadError);
							that.$u.toast("上传失败");
						},
					});
					console.log(uploadTask);
					uploadTask.onProgressUpdate((res) => {
						that.audioprogress = res.progress;
						console.log(that.audioprogress);
					});
				},
			});
		},

		// 保存视频
		keepVideo(data, duration) {
			console.log("上传视频时长", Math.floor(duration), duration)
			this.$request("/shuziren/userUploadVideo/add", {
				videoUrl: data.fileUrl,
				coverUrl: data.coverUrl,
				videoDuration: Math.floor(duration)
			}, "POST", "application/json").then((res) => {
				if (res.code === 200) {
					this.videoProgress = 0
					console.log("保存成功");
					uni.hideLoading()
					this.$u.toast("上传成功")
					this.getVideoList();
				}else{
					uni.hideLoading()
					this.videoProgress = 0
					this.$u.toast(res.msg)
				}
			});
		},

		// 播放上传音频
		uploadAudioPlayFun(url) {
			if (!url) return this.$u.toast("请上传音频");
			if (this.audioId) {
				this.audioContext.destroy();
				this.audioContext = null;
				this.audioId = 0;
			}
			if (this.isUploadPlay) {
				this.innerAudioContext.pause();
				this.isUploadPlay = false;
				return;
			}
			this.isUploadPlay = true;
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.autoplay = true;
			this.innerAudioContext.src = url;
			this.innerAudioContext.onPlay(() => {
				console.log("开始播放");
			});
			this.innerAudioContext.onEnded(() => {
				console.log("播放结束");
				this.isUploadPlay = false;
				this.innerAudioContext.destroy();
				this.innerAudioContext = null;
			});
		},
	
	
		// 上传视频素材
		uploadFun(tempFilePaths, duration) {
			console.log("上传视频时长", duration)
			let that = this;
			uni.showLoading({
				title: "视频上传中，请稍后..."
			})
			const uploadTask = uni.uploadFile({
				url: baseUrl.url + "/aiet-file-center/file/unlimitedFile",
				filePath: tempFilePaths,
				name: "file",
				formData: {
					path: "shuziren/video",
				},
				timeout: 600000,
				success(uploadRes) {
					let data = JSON.parse(uploadRes.data);
					console.log("上传成功后的结果", data, "kkkkkkk")
					console.log(data);
					if (data.code === 200) {
						that.videoProgress = 100;
						that.keepVideo(data.data, duration);	
					} else {
						uni.hideLoading()
						console.log(data.msg)
						that.$u.toast(data.msg);
					}
				},
				fail(uploadError) {
					console.log(uploadError);
					uni.hideLoading()
					that.$u.toast(uploadError.errno === 5 ? "视频内容过大" : "当前网络不佳");
					that.videoProgress = 0;
				},
				complete(complete) {
					console.log(complete)
				}
			});
			uploadTask.onProgressUpdate((res) => {
				console.log("视频上传进度", res.progress, res);
				that.videoProgress = res.progress;
				if(that.videoProgress>=99) that.videoProgress = 99
			});
		},

		// 选择视频素材
		chooseVideo() {
			let isFirstUpload = uni.getStorageSync("isFirstUpload")
			console.log(isFirstUpload)
			if(isFirstUpload===1 || !isFirstUpload) return this.show80 = true
			let that = this;
			uni.chooseVideo({
				sourceType: ["camera", "album"],
				compressed: false,
				success(res) {
					const tempFilePaths = res.tempFilePath;
					console.log("上传视频获取的成功结果", res);
					console.log("上传视频获取到的临时路径", tempFilePaths);
					uni.showLoading({
						title: "视频整合中，请稍后..."
					})
					uni.getVideoInfo({
						src: tempFilePaths,
						success(result) {
							console.log("获取原视频信息", result.width, result);
							if (result.width > 2048) {
								// 4K视频需要压缩
								console.log("4K视频处理")
								if (result.width > result.height) {
									const scale = 1080 / result.height;
									that.compressVideo(tempFilePaths, result, scale);
								} else {
									const scale = 1080 / result.width;
									that.compressVideo(tempFilePaths, result, scale);
								}
							} else {
								// 非4K视频不用压缩
								console.log("非4K视频处理")
								uni.hideLoading()
								that.uploadFun(tempFilePaths, result.duration);
							}
						},
						fail(err) {
							uni.hideLoading()
							console.log("素材上传失败", err);
						},
					});
				},
				fail(err) {
					uni.hideLoading();
					console.log("素材上传失败", err);
				},
			});
		},
		
		//压缩视频文件
		compressVideo(tempFilePaths, result, resolution) {
			console.log("开始压缩视频")
			console.log("压缩率", resolution)
			let that = this;
			wx.compressVideo({
				src: tempFilePaths,
				bitrate: result.bitrate,
				fps: result.fps,
				resolution: resolution,
				success(RES) {
					console.log("获取压缩成功后文件临时路径", RES);
					uni.hideLoading()
					that.uploadFun(RES.tempFilePath, result.duration);
					uni.getVideoInfo({
						src: tempFilePaths,
						success(RESULT) {
							console.log("获取压缩成功后文件信息", RESULT)
						}
					})
				},
				fail(err1) {
					uni.hideLoading();
					console.log("压缩视频失败", err1);
				},
			});
		},
	},
};
</script>


<style lang="less" scoped>
.popupVue {
	width: 620rpx;
	height: 100vh;
	padding: 30rpx;
	.h2 {
		font-weight: 700;
		font-size: 30rpx;
		color: #000;
		line-height: 1;
	}

	.upload {
		width: 180rpx;
		height: 60rpx;
		border-radius: 12rpx;
		background: #FFA0A0;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		font-size: 26rpx;
	}

	.scrollVue {
		width: 100%;
		height: calc(100vh - 120rpx);
		margin-top: 30rpx;
		box-sizing: border-box;
		.voiceVue {
			width: 100%;
			height: 100%;

			.item {
				width: 100%;
				height: 80rpx;
				background: #fff;
				overflow: hidden;
				border-radius: 12rpx;

				.playBtn {
					width: 80rpx;
					height: 80rpx;
					background: #ebeded;
				}

				.content {
					flex: 1;
					height: 80rpx;
					background: #f5f5f5;
				}
			}
		}

		.videoVue {
			width: 100%;
			.videoItem {
				width: 270rpx;
				height: 430rpx;
				background: #f5f5f5;
				margin-bottom: 20rpx;
				border-radius: 12rpx;
			}
			.botVue {
				width: 100%;
				height: 160rpx;
				padding: 0 20rpx;
				border-radius: 0 0 12rpx 12rpx;

				text {
					color: #333;
					font-weight: 600;
				}

				.btn {
					width: 110rpx;
					height: 60rpx;
					background: #FFA0A0;
					line-height: 60rpx;
					text-align: center;
					color: #fff;
					border-radius: 12rpx;
				}
			}

			.active {
				background: #FFA0A0;
				text {
					color: #fff;
				}
			}
		}
	}
}

.popVue {
	width: 650rpx;
	padding: 40rpx;
	.title {
		font-weight: 600;
		color: #000;
	}
	.notice {
		padding-top: 30rpx;
		color: #000;
		text {
			color: #FFA0A0;
			font-weight: 600;
		}
	}
	.item {
		width: 100%;
		height: 100rpx;
		border: 1rpx solid #ebeded;
		border-radius: 12rpx;
		.playBtn {
			width: 100rpx;
			height: 100rpx;
			background: #ebeded;
			border-radius: 12rpx 0 0 12rpx;
		}
	}
	.btnVue {
		width: 100%;
		height: 80rpx;
		.btn {
			width: 46%;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 12rpx;
		}
		.btn:nth-child(1) {
			background: #f5f5f5;
			color: #81868e;
		}
		.btn:nth-child(2) {
			background: #FFA0A0;
			color: #fff;
		}
	}
}

.section {
	width: 690rpx;
	border-radius: 12rpx;
	background: #fff;
	padding: 30rpx;
	box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
		inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);

	.title {
		color: #000;
		font-weight: 600;
		font-size: 28rpx;
		line-height: 1;
	}
}

.inpVue {
	width: 690rpx;
	border-radius: 12rpx;
	background: #fff;
	padding: 30rpx;
	box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);

	.label {
		color: #000;
		font-weight: 600;
		font-size: 30rpx;
	}

	.aiBtn {
		width: 100rpx;
		height: 52rpx;
		line-height: 52rpx;
		color: #fff;
		background: #FFA0A0;
		border-radius: 12rpx;
		font-size: 24rpx;
		margin-left: 20rpx;
	}
	
	.speed {
		width: 18%;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		background-color: #f5f5f5;
		border-radius: 12rpx;
	}
	
	.speedActive {
		background: #FFA0A0;
		color: #fff;
	}

	.startBtn {
		width: 100%;
		height: 88rpx;
		background: #FFA0A0;
		border-radius: 12rpx;
		line-height: 88rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
	}

	textarea {
		width: 100%;
		height: 160rpx;
		border-radius: 12rpx;
		border: 1rpx solid #ebeded;
		font-size: 28rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
		color: #000;
	}

	.audioVue {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #ebeded;
		border-radius: 12rpx;

		.playBtn {
			width: 80rpx;
			height: 80rpx;
			background: #ebeded;
			border-radius: 12rpx 0 0 12rpx;
		}
	}

	input {
		width: 100%;
		height: 88rpx;
		border: 1rpx solid #ebeded;
		border-radius: 12rpx;
		margin-top: 20rpx;
		padding-left: 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		color: #000;
	}
}

.chooseVue {
	width: 100%;
	height: 88rpx;
	border: 1rpx solid #ebeded;
	border-radius: 12rpx;
	margin-top: 20rpx;
	padding: 0 10rpx 0 20rpx;
	text {
		color: #333;
	}
}
</style>
